// /**
// //  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
//  *
//  * @category    design
//  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
//  * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
//  */

.panel.header {
    .links,
    .switcher {
        display: none;
    }
}

.nav-sections {
    .css(background, @navigation-background);
}

.nav-toggle {
    .icon-font(
        @icon-menu,
        @_icon-font-size: 28px
    );
    .icon-text-hide();
    display: block;
    position: absolute;
    top: 12px;
    left: 15px;
    font-size: 0;
    z-index: 14;
    cursor: pointer;
}

//
//    Mobile
//--------------------------------------
@active-nav-indent: 54px;
.responsive-smaller(@break) when (@break = @screen-m) {
    .navigation {
        padding: 0;
        .parent .level-top {
            position: relative;
            .icon-font(
                @_icon-font-content: @icon-down,
                @_icon-font-size: 42px,
                @_icon-font-position: after,
                @_icon-font-display: block
            );
            &:after {
                position: absolute;
                right: 7px;
                top: -8px;
            }
            &.ui-state-active {
                .icon-font-symbol(
                    @_icon-font-content: @icon-up,
                    @_icon-font-position: after
                );
            }
        }
    }
    .nav-sections {
        overflow: auto;
        position: fixed;
        top: 0;
        height: 100%;
        left: -80%;
        left: calc(~"-1 * (100% - @{active-nav-indent})");
        width: 80%;
        width: calc(~"100% - @{active-nav-indent}");
        .css(transition, left .3s, 1);

        .switcher {
            border-top: 1px solid #D1D1D1;
            margin: 0;
            font-size: 1.6rem;
            padding: 8px 20px;
            font-weight: 700;
            .label {
                display: block;
                margin-bottom: @indent-xs-base;
            }
            &:last-child {
                    border-bottom: 1px solid #D1D1D1;
            }
            &-trigger {
                strong {
                    display: inline-block!important;
                    position: relative;
                    .icon-font(
                        @_icon-font-content: @icon-down,
                        @_icon-font-size: 42px,
                        @_icon-font-position: after,
                        @_icon-font-display: block
                    );
                    &:after {
                        position: absolute;
                        right: -40px;
                        top: -18px;
                    }
                }
                &.active strong {
                    .icon-font-symbol(
                        @_icon-font-content: @icon-up,
                        @_icon-font-position: after
                    );
                }
            }
            &-dropdown {
                .list-reset-styles();
                padding: @indent-s-base 0;
            }
        }

        .header.links {
            .list-reset-styles();
            li {
                border-top: 1px solid #D1D1D1;
                margin: 0;
                font-size: 1.6rem;
                &.greet.welcome {
                    padding: 8px 20px;
                    font-weight: 700;
                }
                &:last-child {
                    border-bottom: 1px solid #D1D1D1;
                }
            }
            a, a:hover
            {
                display: block;
                padding: 8px 20px;
                font-weight: 700;
                .css(color, @navigation-level0-item-color);
                .css(text-decoration, @navigation-level0-item-text-decoration);
            }
        }
    }

    .nav-before-open {
        height: 100%;
        width: 100%;
        .page-wrapper {
            height:100%;
            overflow: hidden;
            position: relative;
            left: 0;
            .css(transition, left .3s, 1);
        }
        body {
            overflow: hidden;
            height: 100%;
            width: 100%;
            position: relative;
        }
    }
    .nav-open {
        .page-wrapper {
            left: 80%;
            left: calc(~"100% - @{active-nav-indent}");
        }
        .nav-sections {
            left: 0;
            z-index: 99;
            @_shadow:  0 0 5px 0 rgba(50, 50, 50, 0.75);
            .css(box-shadow, @_shadow, 1);
        }
        .nav-toggle {
            &:after{
                display: block;
                content: "";
                width: 100%;
                z-index: 1;
                position: fixed;
                height: 100%;
                top: 0;
                right:0;
                background: rgba(0,0,0,0.01);
            }
        }
    }
    .nav-sections {
        &-items {
            .clearfix();
            position: relative;
            z-index: 1;
        }
        &-item-title {
            float: left;
            width: 33.33%;
            text-align: center;
            border: solid darken(@navigation-background,10%);
            border-width: 0 0 1px 1px;
            .box-sizing();
            padding-top: 24px;
            height: 71px;
            background: darken(@navigation-background,5%);
            &.active {
                background: transparent;
                border-bottom: 0;
            }
        }
        &-item-content {
            .box-sizing();
            .clearfix();
            float: right;
            margin-top: 71px;
            margin-left: -100%;
            width: 100%;
            &.active {
                display: block;
            }
            padding: @indent-m-base 0;
        }
    }
    .main-navigation();
}

//
//    Desktop
//--------------------------------------
.responsive(@break) when (@break = @screen-m) {
    .nav-toggle {
        display: none;
    }
    .nav-sections {
        margin-bottom: @indent-m-base;
        &-item-title {
            display: none;
        }
        &-item-content {
            display: block!important;
        }
        &-item-content > * {
            display: none;
        }
        &-item-content > .navigation {
            display: block;
        }
    }
    .main-navigation-desktop();
    .panel.header {
        .links,
        .switcher {
            display: inline-block;
        }
    }
}
